import * as React from "react";
import { Dimensions } from "react-native";
import { SearchBar } from "react-native-elements";
import { observer, inject } from "mobx-react";
import SearchStore from "../Model/SearchStore";
interface Props extends React.Props<any> {
  onSearch: (search: string) => void;
  onCancel: () => void;
  searchStore: SearchStore;
}

interface State {}

const { width } = Dimensions.get("window");

@inject("searchStore")
@observer
export default class SearchView extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this._normalState();
  }

  render() {
    return (
      <SearchBar
        placeholder={"搜索点什么..."}
        onChangeText={(text: string) => {
          this.props.searchStore.searchContent = text;
        }}
        value={this.props.searchStore.searchContent}
        platform="ios"
        cancelButtonTitle="取消"
        cancelButtonProps={{
          buttonStyle: {
            borderRadius: 5,
            backgroundColor: "tomato",
            width: 50,
            right: this.props.searchStore.searchCancelBtnRight
          },
          color: "white",
          buttonTextStyle: { fontSize: 15 }
        }}
        inputContainerStyle={{
          backgroundColor: "#eee",
          width: this.props.searchStore.searchInputWidth
        }}
        inputStyle={{ fontSize: 16, color: "#333" }}
        returnKeyType="search"
        enablesReturnKeyAutomatically={false}
        autoCapitalize="none"
        autoCorrect={false}
        onCancel={() => {
          this.props.searchStore.searchContent = "";
          this.props.onCancel();
        }}
        onSubmitEditing={() => {
          this.props.onSearch(this.props.searchStore.searchContent.trim());
        }}
        onFocus={this._onState}
        onBlur={this._normalState}
      />
    );
  }

  _normalState = () => {
    this.props.searchStore.searchInputWidth = width - 16.0;
    this.props.searchStore.searchCancelBtnRight = 0;
  };

  _onState = () => {
    this.props.searchStore.searchInputWidth = width - 16.0 - (50.0 + 16.0);
    this.props.searchStore.searchCancelBtnRight = 12;
  };
}
